// 入口函数
$(function () {
    // 1.渲染文章分类列表 - 后面要用，封装成函数;
    initArtCateList();
    // 封装
    let layer = layui.layer;
    function initArtCateList() {
        $.ajax({
            url: '/my/article/cates',
            success: function (res) {
                // console.log(res);
                // 判断状态码
                if (res.status != 0) {
                    return layer.msg(res.message);
                }
                // 利用模板引擎渲染（传的是对象，用的是属性）
                let str = template('tpl-art-cate', res);
                $("tbody").html(str);
            }
        })
    }

    // 2.添加窗口展示
    $("#btnAdd").on('click', function () {
        // 弹出层，各种属性去layui官网自己试
        indexAdd = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '260px'],
            content: $("#dialog-add").html()
        });
    })

    // 3.添加文章分类（事件代理/委托）
    let indexAdd = null;
    $("body").on('submit', '#form-add', function (e) {
        // 阻止提交
        e.preventDefault();
        // 发送ajax
        $.ajax({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize(),
            success: function (res) {
                // 状态校验
                if (res.status != 0) {
                    return layer.msg(res.message);
                }
                // 成功后，给提示
                layer.msg("恭喜您，添加文章分类成功！");
                // 重新渲染文章分类列表
                initArtCateList();
                // 关闭对话框
                layer.close(indexAdd);
            }
        })
    });

    // 4.展示修改文章分类对话框（事件委托）
    //   不要用id，因为一个页面id值是唯一的;
    let indexEdit = null;
    let form = layui.form;
    $("tbody").on('click', '.btn-edit', function () {
        // 弹出层，各种属性去layui官网自己试
        indexEdit = layer.open({
            type: 1,
            title: '修改文章分类',
            area: ['500px', '260px'],
            content: $("#dialog-edit").html()
        });
        // 弹窗后立即赋值 - 属性获取和ajax要写到click里面
        let Id = $(this).attr('data-id')
        // alert(Id);
        $.ajax({
            method: 'GET',
            // 不能删除最后的/,必须删除:
            url: '/my/article/cates/' + Id,
            success: function (res) {
                if (res.status != 0) {
                    return layer.msg(res.message);
                }
                // 成功后就渲染数据
                form.val("form-edit", res.data);
            }
        })
    })

    // 5.修改(事件委托)
    $("body").on('submit', '#form-edit', function (e) {
        // 阻止提交
        e.preventDefault();
        // 发送
        $.ajax({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize(),
            success: function (res) {
                // 状态校验
                if (res.status != 0) {
                    return layer.msg(res.message);
                }
                // 成功后，给提示
                layer.msg("恭喜您，修改文章分类成功！");
                // 重新渲染文章分类列表
                initArtCateList();
                // 关闭对话框
                layer.close(indexEdit);
            }
        })
    })

    // 6.删除(事件委托)
    $("tbody").on('click', '.btn-delete', function () {
        // 获取id的时候，不要去询问框里面，因为this指向改变了
        let Id = $(this).attr('data-id');
        // 询问框
        layer.confirm('是否确认删除？', { icon: 3, title: '提示' }, function (index) {
            // 发送ajax
            $.ajax({
                url: '/my/article/deletecate/' + Id,
                success: function (res) {
                    if (res.status != 0) {
                        return layer.msg(res.message);
                    }
                    // 删除成功，重新获取文章分类类别
                    layer.msg("恭喜您，删除成功！");
                    initArtCateList();
                }
            });
            layer.close(index);
        });
    })
});